<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>专用发票黑色</title>
  <script src="./dist/qrcode.js"></script>
  <script src="./dist/moment.js"></script>
  <style>
    @page {
      size: portrait;
    }

    @font-face {
      font-family: 'FangzhengHeiti';
      src: url('./dist/FangZhengHeiTiJianTi-1.ttf') format('truetype');
      /* 其他字体格式 */
    }

    @font-face {
      font-family: 'FangZhengFangSongJianTi';
      src: url('./dist/FangZhengFangSongJianTi-1.ttf') format('truetype');
      /* 其他字体格式 */
    }

    @font-face {
      font-family: 'FangZhengKaiTiJianTi';
      src: url('./dist/FangZhengKaiTiJianTi-1.ttf') format('truetype');
      /* 其他字体格式 */
    }

    @font-face {
      font-family: 'GeTe';
      src: url('./dist/gt.ttf') format('truetype');
      /* 其他字体格式 */
    }

    @media print {
      /* 设置横向打印 */


      /* 设置纵向打印 */
      @page {
        size: portrait;
      }
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      color: #000;
    }

    .centered-div {
      position: relative;
      width: 1024px;
      height: 597.3px;
      background-image: url('./dist/zp_dark.png');
      background-size: 100% 100%;
      background-position: center;
      font-size: 15px;
      font-weight: 300;
      color: #000;
    }

    .qorcode {
      top: 38px;
      left: 8%;
      position: absolute;
    }

    .sunm {
      font-family: 'FangzhengHeiti', 'Microsoft YaHei', 'Arial', sans-serif;
    }

    .fzfs {
      font-family: 'FangZhengFangSongJianTi', 'Microsoft YaHei', 'Arial', sans-serif;
    }

    .fzzk {
      font-family: 'FangZhengKaiTiJianTi', 'Microsoft YaHei', 'Arial', sans-serif;
    }

    .post {
      position: absolute;
    }

    .no_left {
      top: 38px;
      left: 19%;
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 1px;
      line-height: 20px;
    }

    .mac_code {
      top: 107px;
      left: 16.1%;
      color: #000;
      font-size: 14px;
      letter-spacing: 2px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      font-family: 'FangzhengHeiti';
    }

    .no_value {
      top: 32px;
      left: 73%;
      font-size: 28px;
      letter-spacing: 2px;
      line-height: 44px;
      font-family: 'GeTe';
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .number {
      top: 49px;
      left: 86%;
      color: #000;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .number_b {
      top: 68px;
      left: 85%;
      letter-spacing: 3px;
      color: #000;
      font-weight: 400;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .date {
      top: 97px;
      left: 79%;
      color: #000;
      font-size: 14px;
      /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
      font-family: 'FangzhengHeiti';
    }

    .buy_name {
      top: 130px;
      left: 23%;
      font-size: 12px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      font-weight: 600;
    }

    .buy_nsrsbh {
      top: 154px;
      left: 23%;
      letter-spacing: 1.1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.14);
      font-family: 'FangzhengHeiti';
    }

    .buy_address {
      top: 178px;
      left: 23%;
      font-size: 10px;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      white-space: break-spaces;
      font-weight: 600;
      width: 350px;
      line-height: 1;
      overflow: hidden;
    }

    .buy_bank {
      top: 204px;
      left: 23%;
      font-size: 10px;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      white-space: break-spaces;
      font-weight: 600;
      /* width: 350px;
      line-height: 1; */
    }

    .code {
      top: 213px;
      left: 264px;
    }

    .name-right {
      top: 130px;
      left: 61%;
      white-space: break-spaces;
      font-weight: 600;
      width: 340px;
      letter-spacing: 2px;
      overflow: hidden;
    }

    .code-right {
      top: 213px;
      left: 754px;
    }

    .table {
      top: 238px;
      left: 9.2%;
      width: 100%;
      font-size: 13px;
      text-shadow: 1px 1px 2px rgba(59, 57, 57, 0);
      font-weight: 600;
    }

    td {
      text-align: left;
      text-shadow: 1px 1px 2px rgba(59, 57, 57, 0);
    }

    .table1 {
      top: 388px;
      left: 9.2%;
      width: 100%;
      width: 100%;
      text-shadow: 1px 1px 2px rgba(59, 57, 57, 0);
      font-weight: 600;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .a-total {
      top: 423px;
      left: 35%;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      font-weight: 600;
    }

    .total-v {
      top: 420px;
      left: 77.8%;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 1.2px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      font-weight: 600;
      /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif */
    }

    .remark {
      top: 454px;
      left: 61%;
      font-size: 12px;
      letter-spacing: 1.2px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      font-weight: 600;
      width: 340px;
      white-space: break-spaces;
      text-align: left;
    }

    .sale_name {
      top: 458px;
      left: 23%;
      font-size: 12px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      font-weight: 600;
    }

    .sale_nsrsbh {
      top: 478px;
      left: 23%;
      letter-spacing: 1.1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.14);
      font-family: 'FangzhengHeiti';
    }

    .sale_address {
      top: 498px;
      left: 23%;
      font-size: 10px;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      white-space: break-spaces;
      font-weight: 600;
      width: 350px;
      line-height: 1;
    }

    .sale_bank {
      top: 520px;
      left: 23%;
      font-size: 11px;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      white-space: break-spaces;
      /* width: 350px; */
      line-height: 1;
      font-weight: 600;
    }

    .fkr {
      top: 544px;
      left: 16.5%;
      font-size: 14px;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

    }

    .fhr {
      top: 544px;
      left: 39%;
      font-size: 14px;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      font-weight: 600;

    }

    .kpr {
      top: 544px;
      left: 59%;
      font-size: 14px;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

    }

    #exportButton {
      margin: 10px;
      padding: 8px 16px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      position: absolute;
      top: 24px;
      right: 24px;
    }

    #exportButton:hover {
      background-color: #0056b3;
    }
  </style>
</head>

<body>
  <button id="exportButton" onclick="printPage()">导出</button>
  <div class="centered-div">
    <div id="qrcode" class="qorcode">

    </div>
    <div class="no_left post fzzk">
    </div>
    <div class="no_value post">
    </div>
    <div class="number post fzzk">
    </div>
    <div class="number_b post fzfs">
    </div>
    <div class="date post">
    </div>
    <div class="mac_code post fzfs">
    </div>
    <div class="buy_name post fszk"></div>
    <div class="buy_nsrsbh post"></div>
    <div class="buy_address post fszk"></div>
    <div class="buy_bank post fszk"></div>
    <div class="name-right post sunm"></div>
    <!-- <div class="code-right post">91530112MA6N0JUX1G</div> -->
    <table class="table post fszk" id="tb">
    </table>
    <table class="table1 post fszk" id="tb1">
    </table>
    <div class="a-total post fszk">
    </div>
    <div class="total-v post fszk">
    </div>
    <div class="sale_name post fszk"></div>
    <div class="sale_nsrsbh post"></div>
    <div class="sale_address post fszk"> </div>
    <div class="sale_bank post fszk"></div>
    <div class="remark post fszk">
    </div>
    <div class="fkr post sunm">
      管理员
    </div>
    <div class="fhr post sunm">
      管理员
    </div>
    <div class="kpr post sunm">
      管理员
    </div>
  </div>
</body>
<script>
  var queryString = window.location.search
  var urlParams = new URLSearchParams(queryString)
  var id = urlParams.get('id')
  var info = {
  }
  function printPage() {
    document.getElementById("exportButton").hidden = true
    window.print()
    document.getElementById("exportButton").hidden = false
    return
  }
  function renderCode() {
    const qrCodeDiv = document.getElementById('qrcode')
    const text = `http://sys.ynjov.com/invoicea.html?no=${info.invoiceNumber.trim()}&date=${info.invoiceDate.trim()}&amount=${info.totalAmount.trim()}`
    console.log(text)
    // 创建二维码实例
    const qrCode = new QRCode(qrCodeDiv, {
      text: text,
      width: 76,
      height: 76,

    })

    // 获取 canvas 元素
    const canvas = qrCodeDiv.querySelector('canvas')

    // 创建一个新的 Image 对象，加载 Logo 图片
    const logoImage = new Image()
    logoImage.src = './dist/logo.png' // 替换为你的 Logo 图片路径

    // 等待 Logo 图片加载完成后，在二维码上绘制 Logo
    logoImage.onload = function () {
      const ctx = canvas.getContext('2d')

      // 在 canvas 上绘制二维码
      ctx.drawImage(canvas, 12, 12)

      // 设置 Logo 的位置和大小
      const logoWidth = canvas.width * 0.2 // 调整 Logo 大小
      const logoHeight = canvas.height * 0.2 // 调整 Logo 大小
      const x = (canvas.width - logoWidth) / 2 // 居中
      const y = (canvas.height - logoHeight) / 2 // 居中

      // 在二维码上绘制 Logo
      ctx.drawImage(logoImage, x, y, logoWidth, logoHeight)
    }
  }
  function renderCntent() {
    document.querySelector('.no_left').innerText = info.invoiceNumber.trim()
    document.querySelector('.no_value').innerText = info.invoiceNo.trim()
    document.querySelector('.number').innerText = info.invoiceNumber
    document.querySelector('.number_b').innerText = info.invoiceNo.trim()
    document.querySelector('.date').innerText = moment(info.invoiceDate).format('YYYY年MM月DD日')
    document.querySelector('.mac_code').innerText = info.verificationCode.trim()
    document.querySelector('.buy_name').innerText = info.buyerCompanyName.trim()
    document.querySelector('.buy_nsrsbh').innerText = info.buyerTaxID.trim()
    document.querySelector('.buy_address').innerText = info.buyerAddressAndPhone.trim()
    document.querySelector('.buy_bank').innerText = info.buyerBankAndAccount.trim()
    document.querySelector('.name-right').innerText = info.password.trim()
    document.querySelector('.sale_name').innerText = info.sellerCompanyName.trim()
    document.querySelector('.sale_nsrsbh').innerText = info.sellerTaxID.trim()
    document.querySelector('.sale_address').innerText = info.sellerAddressAndPhone.trim()
    document.querySelector('.sale_bank').innerText = info.sellerBankAndAccount.trim()
    document.querySelector('.a-total').innerText = info.totalAmountInWords
    document.querySelector('.total-v').innerText = info.totalAmount
    document.querySelector('.remark').innerHTML =info.note.trim()
    document.querySelector('.kpr').innerText = '管理员'
    document.querySelector('.fhr').innerText = info.reviewer
    document.querySelector('.fkr').innerText = info.payee
  }
  window.onload = function () {
    fetch('http://api.ynjov.com:8080/api/getInvoicesDetail/' + id)
      .then(response => {
        
        if (!response.ok) {
          throw new Error('Network response was not ok')
        }
        return response.json()
      })
      .then(({ data, items }) => {
        console.log(data, items)
        info = data
        let str = '', total1 = 0, total2 = 0
        items.forEach(item => {
          str += `
          <tr>
        <td style="width: 220px">${item.goodsOrServicesName}</td>
        <td style="width: 106px">${item.specifications}</td>
        <td style="width: 120px">${item.unit}</td>
        <td style="width: 30px;">${Number(item.quantity).toFixed(0)}</td>
        <td style="width:100px;">${item.unitPrice}</td>
        <td style="width: 100px;text-align:center;">${item.amount}</td>
        <td style="width: 50px">${item.taxRate}%</td>
        <td style="text-align:left;padding-left:40px">${item.taxAmount}</td>
      </tr>`
          total1 = Number(total1) + Number(item.amount)
          total2 = Number(total2) + Number(item.taxAmount)
        })

        // 找到父元素
        const parentElement = document.getElementById('tb')
        // 将子元素添加到父元素中
        parentElement.innerHTML = str
        document.getElementById('tb1').innerHTML = (`
        <tr>

        <td style="width: 220px"></td>
        <td style="width: 106px"></td>
        <td style="width: 120px"></td>
        <td style="width: 30px;"></td>
        <td style="width:90px;"></td>
        <td style="width: 100px;text-align:center;">¥${total1}</td>
        <td style="width: 50px"></td>
        <td style="text-align:left;padding-left:30px">¥${total2}</td>
      </tr>
      `)
        renderCode()
        renderCntent()
      })
      .catch(error => {
        console.error('Fetch error:', error)
      })
  };
</script>

</html>